<template>
  <div class="SetPriceTableItemsHandle">
    <div>
      <span>销售单总额：￥{{ infoList.totalPrice || "0.00" }}</span>
    </div>
    <div class="tr mr">
      <el-button class="mb20" type="primary" @click="handleAdd" size="mini">
        新增
      </el-button>
    </div>
    <Collapse v-for="(item, index) in infoList.list" :key="index" v-model="activeNames">
      <CollapseItem :name="index">
        <div slot="title" class="flex1">
          <div class="m-collapse-title ">
            <div class="flex1">
              <span>
                {{ "规则" + (index + 1) }}
              </span>
            </div>
            <div class="mr20">
              <i class="el-icon-delete fs20 mr10" :class="
                  infoList.list.length <= 1
                    ? 'info notAllow'
                    : 'primary pointer'
                " @click.stop="handelDel(index, infoList.list.length <= 1)"
></i>
            </div>
          </div>
        </div>

        <zm-form label-width="150px" :rules="rules" :model="item" ref="item">
          <zm-form-item label="活动类型" prop="type">
            <zm-data-radio v-model.trim="item.type" :list="activityTypeList"></zm-data-radio>
          </zm-form-item>
          <zm-form-item label="活动场地" prop="address">
            <zm-input v-model.trim="item.address" placeholder="请填写活动场地" class="w400" />
          </zm-form-item>
          <zm-form-item label="活动时间" prop="endTime">
            <zm-date-picker :target="item" start-key="startTime" end-key="endTime" type="datetimerange" class="w400" />
          </zm-form-item>
          <zm-form-item label="销售总额计算方式" prop="calculationMethod">
            <zm-data-radio v-model.trim="item.calculationMethod" :list="numberCalculationList"></zm-data-radio>
          </zm-form-item>
          <el-form-item label="销售单价" prop="unitPrice" v-if="item.calculationMethod === '1'">
            <zm-input type="number" v-model="item.unitPrice" placeholder="0.00" class="w400" disabled @input.native="item.totalSalePrice / item.joinCount">
              <template slot="append">
                元
              </template>
            </zm-input>
          </el-form-item>
          <el-form-item label="活动人数" prop="joinCount" v-if="item.calculationMethod === '1'">
            <zm-input type="number" v-model="item.joinCount" placeholder="0" class="w400" @input.native="limitInput($event, 'joinCount', index)">
              <template slot="append">
                人
              </template>
            </zm-input>
          </el-form-item>
          <el-form-item label="销售总额" prop="totalSalePrice">
            <zm-input type="number" v-model="item.totalSalePrice" placeholder="0.00" class="w400" @input.native="limitInput($event, 'totalSalePrice', index)">
              <template slot="append">
                元
              </template>
            </zm-input>
          </el-form-item>
          <zm-form-item label="活动备注" prop="remark">
            <zm-input type="textarea" v-model.trim="item.remark" placeholder="请填写" class="w400" />
          </zm-form-item>
        </zm-form>
      </CollapseItem>
    </Collapse>
  </div>
</template>
<script>
import { Collapse, CollapseItem } from 'element-ui'
import datePickerMixin from '@/mixins/datePickerMixin'
import zmDatePicker from '@/commons/ZmDatePicker'

export default {
  name: 'StepWen',
  components: { Collapse, CollapseItem, zmDatePicker },
  mixins: [datePickerMixin],
  props: {
    rule: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      /* form: {
        type: '1', // 活动类型 1党建 2春秋游 3体育赛事 4其他
        address: '',
        startTime: '',
        endTime: '',
        calculationMethod: '1', // 销售总额计算方式 1按人头算 2按场次算
        unitPrice: '', // 销售单价
        joinCount: '', // 活动人数
        totalSalePrice: '', // 销售总额
        remark: '' // 活动备注
      }, */
      activityTypeList: [
        {
          value: '1',
          name: '党建'
        },
        {
          value: '2',
          name: '春秋游'
        },
        {
          value: '3',
          name: '体育赛事'
        },
        {
          value: '4',
          name: '其他'
        }
      ],
      numberCalculationList: [
        {
          value: '1',
          name: '按人头算'
        },
        {
          value: '2',
          name: '按场次算'
        }
      ],
      activeNames: [0],
      Collapse,
      CollapseItem,
      rules: {
        type: { required: true, message: '请填写', trigger: 'blur' },
        address: { required: true, message: '请填写', trigger: 'blur' },
        endTime: { required: true, message: '请填写', trigger: 'change' },
        calculationMethod: { required: true, message: '请填写', trigger: 'blur' },
        unitPrice: { required: true, message: '请填写', trigger: 'blur' },
        joinCount: { required: true, message: '请填写', trigger: 'blur' },
        totalSalePrice: { required: true, message: '请填写', trigger: 'blur' }
      }
    }
  },
  computed: {
    infoList: {
      get () {
        return this.rule
      },
      set (val) {

      }
    }

  },
  watch: {
    'infoList.list': {
      handler () {
        this.infoList.totalPrice = this.countTotal(this.infoList.list, 'totalSalePrice') || 0
        this.infoList.list.map(item => {
          item.unitPrice = (Math.round((+item.totalSalePrice / +item.joinCount) * 100) / 100).toString()
        })
      },
      deep: true
    }
  },
  created () { },
  methods: {
    countTotal (arr, keyPrice) {
      let $total = 0
      $total = arr.reduce(function (total, currentValue, currentIndex, arr) {
        return currentValue[keyPrice] ? total + +currentValue[keyPrice] : total
      }, 0)
      return $total.toFixed(2)
    },
    handleAdd () {
      this.infoList.list.push({
        type: '1', // 活动类型 1党建 2春秋游 3体育赛事 4其他
        address: '',
        startTime: '',
        endTime: '',
        calculationMethod: '1', // 销售总额计算方式 1按人头算 2按场次算
        unitPrice: '', // 销售单价
        joinCount: '', // 活动人数
        totalSalePrice: '', // 销售总额
        remark: '' // 活动备注
      })
    },
    handelDel (index, flag) {
      if (flag) {
        this.$message.warning('至少存在一个规则')
        return
      }
      this.$confirm('是否确定删除该规则', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.infoList.list.splice(index, 1)
          this.$nextTick(() => {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
          })
        })
        .catch(() => { })
    },
    limitInput (e, name, index) {
      this.infoList.list[index][name] =
        ('' + e.target.value)
          .replace(/[^\d^\\.]+/g, '')
          .replace(/^0+(\d)/, '$1')
          .replace(/^\./, '0.')
          .match(/^\d*(\.?\d{0,2})/g)[0] || ''
    },
    numberChange (e, key, index) {
      let regNumber = new RegExp('^[1-9][0-9]*$').test(e.target.value)
      if (key === 'number' && !regNumber) {
        // this.$message.warning('请输入正整数')
        this.$set(this.infoList.list[index], key, '')
      }
    },
    saveTime (val) {
      console.log(val, 'valvalvalval')
    }
  }
}
</script>
<style lang="scss">
.SetPriceTableItemsHandle {
  .m-collapse-title {
    font-size: 18px;
    color: #555;
    margin-bottom: 10px;
    width: 100%;
    display: flex !important;
    justify-content: center;
  }

  .el-collapse {
    border: none !important;
    margin-bottom: 10px !important;
  }

  .el-collapse-item__wrap {
    border-bottom: none;
  }

  .el-collapse-item:last-child {
    border: 1px solid #eee;
    padding: 10px 10px 0px 10px;
    box-sizing: border-box;
  }

  .el-collapse-item__header {
    border: none !important;
  }

  .el-collapse-item__arrow {
    margin-top: -9px !important;
  }
}
</style>
